<template>
  <div class="content">
    <div class="loginForm" v-if="isShow == 1">
      <div class="title">{{ title }}</div>
      <div class="userName">
        <el-input
          type="text"
          placeholder="请输入用户名"
          v-model="userName"
        ></el-input>
      </div>
      <div class="passWord">
        <el-input
          type="passWord"
          placeholder="请输入密码"
          v-model="passWord"
        ></el-input>
      </div>
      <div class="btn">
        <el-button type="primary" @click="registerBtn" style="flex: 1"
          >注册</el-button
        >
        <el-button type="primary" @click="loginBtn" style="flex: 1"
          >登录</el-button
        >
      </div>
    </div>
    <div class="loginForm" v-if="isShow == 2">
      <div class="title">{{ title }}</div>
      <div class="userName">
        <el-input
          type="text"
          placeholder="请输入用户名"
          v-model="registerForm.userName"
        ></el-input>
      </div>
      <div class="passWord">
        <el-input
          type="passWord"
          placeholder="请输入密码"
          v-model="registerForm.passWord"
        ></el-input>
      </div>
      <div class="btn">
        <el-button type="primary" @click="registerSubmit" style="flex: 1"
          >立即注册</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { login, register } from "./../api/index";
export default {
  data() {
    return {
      userName: "",
      passWord: "",
      title: "聊天室登录",
      registerForm: {},
      isShow: 1,
    };
  },
  methods: {
    loginBtn() {
      if (this.userName == "" || !this.userName) {
        this.$message.error("请输入账号");
        return false;
      }
      if (this.passWord == "" || !this.passWord) {
        this.$message.error("请输入密码");
        return false;
      }
      login({ userName: this.userName, passWord: this.passWord }).then(
        (res) => {
          const data = res.data;
          if (data.code == 200) {
            this.$message.success(data.msg);
            sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo));
            this.$router.push({ path: "/msg" });
          } else {
            this.$message.error(data.msg);
          }
        }
      );
    },
    registerBtn() {
      this.title = "聊天室用户注册";
      this.registerForm = {};
      this.isShow = 2;
    },
    registerSubmit() {
      if (!this.registerForm.userName || this.registerForm.userName == "") {
        this.$message.error("请输入用户名");
        return;
      }
      if (!this.registerForm.passWord || this.registerForm.passWord == "") {
        this.$message.error("请输入密码");
        return;
      }
      console.log(this.registerForm);
      register({
        ...this.registerForm,
      }).then((res) => {
        const data = res.data;
        if (data.code == 200) {
          this.$message.success(data.msg);
          this.isShow = 1;
          this.userName = "";
          this.passWord = "";
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  background: url("./../../public/bj.jpg");
  height: 100%;
  background-size: cover;
  .loginForm {
    height: 220px;
    width: 280px;
    position: fixed;
    top: 40%;
    right: 10%;
    transform: translate(0, -50%);
    background: rgba($color: #fff, $alpha: 0.7);
    border-radius: 5px;
    box-shadow: 2px 2px 10px #999;
    padding: 20px;
    .title {
      font-size: 20px;
      text-align: center;
      font-weight: bold;
      padding: 10px;
    }
    .userName {
      height: 50px;
      //   border-bottom: 2px solid #999;
      padding: 10px;
    }
    .passWord {
      height: 50px;
      //   border-bottom: 2px solid #999;
      padding: 10px;
    }
    .btn {
      height: 50px;
      //   border-bottom: 2px solid #999;
      padding: 0 10px;
      display: flex;
      :deep(.el-button) {
        width: 100%;
      }
    }
    //     :deep(.el-input) {
    //         width: 100%;
    //         height: 100%;
    //         border: 1px solid red;
    //     }
    //     :deep(.el-input__wrapper) {
    //         background: transparent;
    //         border: 0;
    //         box-shadow:none;
    //         height:100%
    //     }
  }
}
</style>